<template>
	<view class="content">
		<view class="good-search">
			<view class="search-bar">
				<text class="iconfont icon-sousuo"></text>
				<input class="input" v-model="keyWord" @confirm="onSearch" @input="onInput" confirm-type="search" placeholder-style="color: #9C9D9E;font-size: 28rpx;" placeholder="输入关键词搜索" />
				<text class="iconfont icon-guanbi" :class="[{ show : isShowClose}]" @tap="clearKeyword"></text>		
			</view>
			<view class="search-btn">搜索</view>
		</view>
		
		<!--商品排序-->
		<view class="goods-sort">
			<sort
				v-for="(item, index) in filter.sort"
				:key="index"
				:active="item.active"
				:index="index"
				:order="item.order"
				:title="item.title"
				@changeSort="changeSort">
			</sort>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods-list">
			<goods-item v-for="(goodsItem, goodsIndex) in list[active].goodsList" :item="goodsItem" :key="goodsItem.gid" @onCopySuccess="onCopySuccess"></goods-item>
			
			<!-- 商品骨架 -->
			<template v-for="item in ['a', 'b', 'c', 'd']">
				<view
					class="skeleton-wrap"
					v-if="
						list[active].goodsList.length === 0 &&
							!list[active].finished &&
							!list[active].empty
					"
				>
					<skeleton
						class="goods-skeleton"
						:loading="true"
						avatarShape="square"
						avatarSize="296rpx"
					></skeleton>
				</view>
			</template>
						
			<!-- 加载中插件 -->
			<view class="load-status">
				<load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!list[active].finished && !list[active].empty" :contentText="contentText"></load-more>
				<load-more status="noMore" color="#c6c6c6" v-if="list[active].finished" :contentText="contentText"></load-more>
				<empty v-if="list[active].empty"></empty>
			</view>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>
	</view>
</template>

<script>
	import Sort from '@/components/Sort';
	import GoodsItem from "@/components/GoodsItem";
	import LoadMore from "@/components/LoadMore";
	import Empty from "@/components/Empty";
	import Skeleton from '@/components/Skeleton';
	import loader from '@/utils/mixin/loader';
	export default {
		name: 'search',
		mixins: [loader],
		components: {
			Sort,
			GoodsItem,
			LoadMore,
			Empty,
			Skeleton
		},
		data() {
			return {
				keyWord: null,
				isShowClose: false,
				filter: {
					sort: [
						{
							title: '人气',
							active: true,
							order: 'desc'
						},
						{
							title: '销量',
							active: false,
							order: ''
						},
						{
							title: '价格',
							active: false,
							order: ''
						},
						{
							title: '最近',
							active: false,
							order: ''
						}
					]
				},
				seqencing: {
					order: 'sale2',
					sort: 'desc',
				},
			}
		},
		onLoad(options) {
			if (options.keyWord) {
				this.keyWord = options.keyWord;
				this.isShowClose = true;
			}

			this.initLoader();
		},
		methods: {
			// 加载初始化
			initLoader() {
				this.loadMore(this.list[0]);
			},
			// 加载前参数处理
			beforeLoader(item) {
				this.params.keyWord = this.keyWord;
				this.params.order = this.seqencing.order;
				this.params.sort = this.seqencing.sort;
				this.service = this.$service.shopping.goods.page(this.params);
				return true;
			},
			// 触发商品搜索
			onSearch(e) {
				// 区分苹果安卓平台
				if (uni.getSystemInfoSync().platform === 'android') {
					uni.reLaunch({
					    url: '/pages/index/result?keyWord=' + this.keyWord
					});
				} else {
					this.keyWord = e.detail.value;
				}
			},
			// 触发关键词更新
			onInput(e) {
				if (e.detail.value) {
					this.isShowClose = true;
					this.keyWord = e.detail.value;
				} else {
					this.isShowClose = false;
					this.keyWord = null;
				}
			},
			// 清除关键词
			clearKeyword() {
				this.keyWord = null;
				this.isShowClose = false;
			},
			// 筛选切换
			changeSort(index, order) {
				this.filter.sort.forEach(item => {
					item.active = false;
					item.order = '';
				});
				this.filter.sort[index].order = order;
				this.filter.sort[index].active = true;

				this.seqencing.sort = order;

				switch (index) {
					case 0:
						this.seqencing.order = 'sale2';
						break;
					case 1:
						this.seqencing.order = 'sale';
						break;
					case 2:
						this.seqencing.order = 'endPrice';
						break;
					case 3:
						this.seqencing.order = 'fristOrder';
						break;
					default:
						this.seqencing.order = '';
				}
				if (!order) {
					this.seqencing.order = '';
				}

				this.params.page = 1;
				this.onRefresh(this.list[this.active]);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.good-search {
			background: #fff;
			padding: 20rpx 16rpx;
			position: sticky;
			top: 0;
			z-index: 100;
			@include flexBox();
			.search-bar {
				width: 708rpx;
				height: 60rpx;
				border-radius: 50rpx;
				background: #fff;
				padding: 0 26rpx;
				border: 2rpx solid #FF4088;
				box-sizing: border-box;
				color: #9C9D9E;
				margin: 0 auto;
				flex: 1;
				@include flexBox(space-between, center);
				.icon-sousou {
					font-size: 40rpx;
				}
				.text {
					font-size: 28rpx;
					color: #9C9D9E;
				}
				.icon-guanbi {
					font-size: 30rpx;
					margin-left: 10rpx;
					transition: 0.5s;
					opacity: 0;
					&.show {
						opacity: 1;
					}
				}
				.input {
					font-size: 28rpx;
					color: #9C9D9E;
					flex: 1;
					text-align: center;
					background: none;
				}
			}
			.search-btn {
				background: #008000;
				border-radius: 50rpx;
				color: #fff;
				font-size: 28rpx;
				line-height: 60rpx;
				margin-left: 20rpx;
				padding: 0 20rpx;
			}
		}
		.goods-sort {
			background: #fff;
			padding: 22rpx 0;
			position: sticky;
			z-index: 100;
			top: 100rpx;
			@include flexBox(center, center);
		}
		.goods-list {
			padding: 0 10rpx;
			margin-top: 20rpx;
			@include flexBox(flex-start, null, null, wrap);
			.skeleton-wrap {
				width: 344rpx;
				background: #fff;
				border-radius: 16rpx;
				margin: 0 10rpx 20rpx;
			}
			.load-status {
				width: 100%;
				margin-top: -20rpx;
				@include flexBox(center);
			}
		}
	}
</style>
